<template>
    <el-dialog class="window" v-model="open" title="申请加入团队" width="80%">
        <el-input placeholder="请输入团队名称或团队编号" style="width: 300px;height: 38px;border: none;  margin-bottom: 20px;"
            v-model="teamName.name"></el-input>
        <el-button type="primary" style="margin-left: 20px;  margin-bottom: 20px;" @click="searchTeams">搜索</el-button>
        <el-button @click="open = false" type="default" style=" margin-bottom: 20px;">返回</el-button>


        <div v-show="teamName">
            <el-table :data="teamsData"
                :header-cell-style="{ background: '#ccddff', fontWeight: 'normal', color: '#515a6e', textAlign: 'center' }"
                style="font-size: 13px;">

                <el-table-column type="selection" width="55" align="center" />

                <el-table-column prop="_id" label="编号" align="center" />
                <el-table-column prop="" label="头像" align="center">
                    <template #default="{ row }">
                        <el-image :src="row.avatar" style="width: 30px;">
                        </el-image>
                    </template>
                </el-table-column>

                <el-table-column prop="name" label="团队名称" align="center" />
                <el-table-column prop="leaderId.name" label="团队长" align="center" />
                <el-table-column prop="organizationId.name" label="所属机构" min-width="150px" align="center" />
                <!-- <el-table-column prop="state" label="状态" align="center">
                    <template #default="{ row }">
                        <el-switch v-model="row.state" inline-prompt :active-value="1" :inactive-value="0"
                            active-text="启用" inactive-text="关闭" />
                    </template>
                </el-table-column> -->

                <el-table-column prop="" label="操作" align="center">
                    <template #default="{ row }">
                        <el-button link style="color: #2984F8;" @click="onApplyTeam(row._id)">申请加入</el-button>
                    </template>
                </el-table-column>

            </el-table>

        </div>

    </el-dialog>
</template>

<script setup lang="ts">
import { applyTeamApi, searchTeam } from '@/api/team';
import { useGlobalStore } from '@/store/global';
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';

// const router = useRouter();

const adminStore: any = useGlobalStore();

defineProps(['teamData'])
defineEmits(['onAccTeam'])
const open = ref(false)
const teamName = ref({
    name: ''
})

defineExpose({
    teamName,
    open
})

const teamsData = ref([]);

onMounted(() => {
    searchTeams()
})

async function searchTeams() {
    console.log(111);

    const res = await searchTeam({
        ...teamName.value
    })
    if (res.code == 200) {
        teamsData.value = res.data.rows
    }
}

// 请求：加入某个团队
const onApplyTeam = async (teamId: string) => {
    ElMessageBox.confirm(
        '确定要加入该团队吗？',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(async () => {
        const res = await applyTeamApi({
            applicantId: adminStore.adminInfo?._id,
            teamId
        });
        if (res.code == 200) {
            ElMessage({
                type: 'success',
                message: '申请成功，等待对方同意',
            })
            open.value = false;
        } else {
            ElMessage({
                type: 'error',
                message: res.message,
            })
        }
    });
}

</script>

<style scoped>
.window {
    width: 769px;
    height: 603px;
}
</style>